"use client"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { useRouter } from "next/navigation"
import {
    CalendarDays,
    BookOpen,
    CheckCircle,
    X,
    Send,
    User,
    Heart,
    BookMarked,
    Gem,
    Apple,
    Settings,
    Bell,
    LogOut,
    Award,
    Star,
    Calendar,
    BarChart3,
    FileText,
    Lock,
} from "lucide-react"
import {UserInfo} from "@/components/userinfo";
import useAppStore from "@/store/app.store";
import TodayQuote from "@/app/my/todayQuote";

export default function My() {

    // 我执页面的数据
    const userStats = [
        {
            title: "累计校对字数",
            value: "1,245,600",
            icon: <FileText className="h-5 w-5 md:h-6 md:w-6 text-amber-brown" />,
        },
        {
            title: "完成任务数",
            value: "128",
            icon: <CheckCircle className="h-5 w-5 md:h-6 md:w-6 text-amber-brown" />,
        },
        {
            title: "校对准确率",
            value: "98.5%",
            icon: <BarChart3 className="h-5 w-5 md:h-6 md:w-6 text-amber-brown" />,
        },
        {
            title: "参与天数",
            value: "256",
            icon: <Calendar className="h-5 w-5 md:h-6 md:w-6 text-amber-brown" />,
        },
    ]

    const achievements = [
        {
            title: "初入佛门",
            description: "完成第一个校对任务",
            icon: <BookOpen className="h-6 w-6 text-amber-brown" />,
            achieved: true,
            date: "2023-01-15",
        },
        {
            title: "精进不辍",
            description: "连续30天参与校对",
            icon: <Calendar className="h-6 w-6 text-amber-brown" />,
            achieved: true,
            date: "2023-03-20",
        },
        {
            title: "慧眼如炬",
            description: "校对准确率达到99%",
            icon: <CheckCircle className="h-6 w-6 text-amber-brown" />,
            achieved: true,
            date: "2023-05-10",
        },
        {
            title: "大藏经护持者",
            description: "累计校对100万字",
            icon: <Award className="h-6 w-6 text-amber-brown" />,
            achieved: true,
            date: "2023-08-05",
        },
        {
            title: "般若智慧",
            description: "完成所有《心经》校对任务",
            icon: <Star className="h-6 w-6 text-amber-brown" />,
            achieved: false,
        },
        {
            title: "金刚不坏",
            description: "完成所有《金刚经》校对任务",
            icon: <Gem className="h-6 w-6 text-amber-brown" />,
            achieved: false,
        },
    ]

    const accountSettings = [
        {
            title: "修改密码",
            icon: <Lock className="h-5 w-5 text-amber-brown" />,
            action: () => console.log("修改密码"),
        },
        {
            title: "通知设置",
            icon: <Bell className="h-5 w-5 text-amber-brown" />,
            action: () => console.log("通知设置"),
        },
        {
            title: "账户设置",
            icon: <Settings className="h-5 w-5 text-amber-brown" />,
            action: () => console.log("账户设置"),
        },
        {
            title: "退出登录",
            icon: <LogOut className="h-5 w-5 text-amber-brown" />,
            action: () => console.log("退出登录"),
        },
    ]

    return (
        <div className="min-h-screen bg-ancient-scroll font-ancient text-ancient-text">
            <UserInfo active="我执" />
            <TodayQuote />
            <div className="container mx-auto p-3 md:p-6 pb-24 max-w-5xl">
                {/* 我执页面 */}
                <div className="mb-6">
                    <div className="bg-ancient-card/90 backdrop-blur-sm p-4 md:p-6 rounded-lg shadow-ancient">
                        <h2 className="text-xl font-bold text-amber-brown mb-4">校对统计</h2>
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
                            {userStats.map((stat, index) => (
                                <div key={index} className="bg-ancient-scroll/10 p-3 md:p-4 rounded-md">
                                    <div className="flex items-center gap-2 mb-2">
                                        {stat.icon}
                                        <span className="text-sm text-ancient-text/70">{stat.title}</span>
                                    </div>
                                    <div className="text-lg md:text-xl font-bold">{stat.value}</div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>

                {/* 成就徽章 */}
                <div className="mb-6">
                    <div className="bg-ancient-card/90 backdrop-blur-sm p-4 md:p-6 rounded-lg shadow-ancient">
                        <h2 className="text-xl font-bold text-amber-brown mb-4">成就徽章</h2>
                        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                            {achievements.map((achievement, index) => (
                                <div
                                    key={index}
                                    className={`bg-ancient-scroll/10 p-4 rounded-md border ${
                                        achievement.achieved ? "border-amber-brown/30" : "border-ancient-text/10"
                                    }`}
                                >
                                    <div className="flex items-center gap-3 mb-2">
                                        <div
                                            className={`w-10 h-10 rounded-full flex items-center justify-center ${
                                                achievement.achieved ? "bg-amber-brown/20" : "bg-ancient-text/10"
                                            }`}
                                        >
                                            {achievement.icon}
                                        </div>
                                        <div>
                                            <h3
                                                className={`font-bold ${achievement.achieved ? "text-amber-brown" : "text-ancient-text/50"}`}
                                            >
                                                {achievement.title}
                                            </h3>
                                            <p className="text-xs text-ancient-text/70">{achievement.description}</p>
                                        </div>
                                    </div>
                                    {achievement.achieved && (
                                        <div className="text-xs text-right text-ancient-text/60">获得于: {achievement.date}</div>
                                    )}
                                </div>
                            ))}
                        </div>
                    </div>
                </div>

                {/* 账户设置 */}
                <div className="mb-6">
                    <div className="bg-ancient-card/90 backdrop-blur-sm p-4 md:p-6 rounded-lg shadow-ancient">
                        <h2 className="text-xl font-bold text-amber-brown mb-4">账户设置</h2>
                        <div className="space-y-3">
                            {accountSettings.map((setting, index) => (
                                <button
                                    key={index}
                                    onClick={setting.action}
                                    className="w-full flex items-center justify-between p-3 rounded-md bg-ancient-scroll/10 hover:bg-ancient-scroll/20 transition-colors"
                                >
                                    <div className="flex items-center gap-3">
                                        {setting.icon}
                                        <span>{setting.title}</span>
                                    </div>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        className="h-5 w-5 text-ancient-text/50"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        strokeWidth="2"
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                    >
                                        <polyline points="9 18 15 12 9 6"></polyline>
                                    </svg>
                                </button>
                            ))}
                        </div>
                    </div>
                </div>

                {/* 版本信息 */}
                <div className="text-center text-sm text-ancient-text/50 mt-4 mb-8">
                    <p>经文校对系统 v1.0.0</p>
                    <p className="mt-1">© 2023 古籍数字化保护工程</p>
                </div>
            </div>
        </div>
    )
}